<template>
    <div class="page public-box">
        <div class="header-btn">
            <el-button class="btn add-file" type="primary" @click="handleAddFileClick">添加任务</el-button>
        </div>
        <el-table
            :data="fileTableData"
            border
            style="width: 100%"
            class="el-table-public"
            height="100%">
            <el-table-column
                prop="name"
                label="任务名称">
            </el-table-column>
            <el-table-column
                prop="address"
                label="任务描述">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="140">
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="添加任务组" :visible.sync="addFileDialog">
            <el-form :model="addFileForm" label-width="100px">
                <el-form-item label="任务名称：" >
                    <el-input v-model="addFileForm.fileName"></el-input>
                </el-form-item>
                <el-form-item label="任务描述：" >
                    <el-input v-model="addFileForm.fileName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addFileDialog = false">确 定</el-button>
                <el-button @click="addFileDialog = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'vue',
    data() {
        return {
            fileTableData: [
                {
                    date: '2016-05-02',
                    name: '用户1',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '用户2',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '用户3',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '用户4',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '用户5',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '用户6',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '用户7',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '用户8',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '用户9',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '用户10',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, 
            ],
            addFileDialog: false,
            formLabelWidth: '80px',
            addFileForm: {
                fileName: '',
            },
        }
    },
    props: {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    methods: {
        // !添加用户点击事件
        handleAddFileClick () {
            console.log('添加用户点击事件')
            this.addFileDialog = true;
        },
        // !查看用户点击事件
        handleViewClick () {

        },
        // !编辑用户点击事件
        handleUpdateClick (row) {
            this.addFileDialog = true;
            this.addFileForm.userName = row.name;
            console.log(this.addFileForm.userName)
        },
        // !删除用户点击事件
        handleDeleteClick (row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
    },
    created() {

    },
    mounted() {

    }
}
</script>

<style scoped lang="less">

 
</style>
